<template>
  <div ref="cesiumBox" class="absolute inset-0"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as Cesium from "cesium";

const cesiumBox = ref(null);
const cesiumPara = {
  viewer: null,
};

cesiumPara.cameraPosition = function () {
  let cartographic = cesiumPara.viewer.scene.camera.positionCartographic;
  console.log("经度" + (cartographic.longitude * 180) / Math.PI);
  console.log("纬度" + (cartographic.latitude * 180) / Math.PI);
  console.log("高度" + cartographic.height);
  console.log("偏航" + cesiumPara.viewer.scene.camera.heading);
  console.log("俯仰" + cesiumPara.viewer.scene.camera.pitch);
  console.log("桶滚" + cesiumPara.viewer.scene.camera.roll);
};

function init() {
  let subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];
  let imageryProviderTDT = new Cesium.WebMapTileServiceImageryProvider({
    url: "https://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=23c64b6db1d90eaeb7516746514ef956",
    subdomains: subdomains,
    layer: "tdtImage",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
    show: true,
    maximumLevel: 18,
  });

  cesiumPara.viewer = new Cesium.Viewer(cesiumBox.value, {
    imageryProvider: imageryProviderTDT,
    animation: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    vrButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false,
    navigationInstructionsInitiallyVisible: false,
    scene3DOnly: true,
  });
  cesiumPara.viewer._cesiumWidget._creditContainer.style.display = "none";
}

onMounted(() => {
  init();
});

defineExpose({
  cesiumPara,
});
</script>

<style>
.cesium-viewer,
.cesium-viewer-cesiumWidgetContainer,
.cesium-widget,
.cesium-widget canvas {
  width: 100%;
  height: 100%;
}
</style>
